﻿@{
    ViewBag.Title = "FormElements";
}

<div class="page-content">
    <div class="page-header">
        <h1>Form Elements
								<small>
                                    <i class="icon-double-angle-right"></i>
                                    Common form elements and layouts
                                </small>
        </h1>
    </div>
    <!-- /.page-header -->

    <div class="row">
        <div class="col-xs-12">
            <!-- PAGE CONTENT BEGINS -->

            <form class="form-horizontal" role="form">
                <div class="form-group">
                    <label class="col-sm-3 control-label no-padding-right" for="form-field-1">Text Field </label>

                    <div class="col-sm-9">
                        <input type="text" id="form-field-1" placeholder="Username" class="col-xs-10 col-sm-5" />
                    </div>
                </div>

                <div class="space-4"></div>

                <div class="form-group">
                    <label class="col-sm-3 control-label no-padding-right" for="form-field-2">Password Field </label>

                    <div class="col-sm-9">
                        <input type="password" id="form-field-2" placeholder="Password" class="col-xs-10 col-sm-5" />
                        <span class="help-inline col-xs-12 col-sm-7">
                            <span class="middle">Inline help text</span>
                        </span>
                    </div>
                </div>

                <div class="space-4"></div>

                <div class="form-group">
                    <label class="col-sm-3 control-label no-padding-right" for="form-input-readonly">Readonly field </label>

                    <div class="col-sm-9">
                        <input readonly="" type="text" class="col-xs-10 col-sm-5" id="form-input-readonly" value="This text field is readonly!" />
                        <span class="help-inline col-xs-12 col-sm-7">
                            <label class="middle">
                                <input class="ace" type="checkbox" id="id-disable-check" />
                                <span class="lbl">Disable it!</span>
                            </label>
                        </span>
                    </div>
                </div>

                <div class="space-4"></div>

                <div class="form-group">
                    <label class="col-sm-3 control-label no-padding-right" for="form-field-4">Relative Sizing</label>

                    <div class="col-sm-9">
                        <input class="input-sm" type="text" id="form-field-4" placeholder=".input-sm" />
                        <div class="space-2"></div>

                        <div class="help-block" id="input-size-slider"></div>
                    </div>
                </div>

                <div class="form-group">
                    <label class="col-sm-3 control-label no-padding-right" for="form-field-5">Grid Sizing</label>

                    <div class="col-sm-9">
                        <div class="clearfix">
                            <input class="col-xs-1" type="text" id="form-field-5" placeholder=".col-xs-1" />
                        </div>

                        <div class="space-2"></div>

                        <div class="help-block" id="input-span-slider"></div>
                    </div>
                </div>

                <div class="form-group">
                    <label class="col-sm-3 control-label no-padding-right">Input with Icon</label>

                    <div class="col-sm-9">
                        <span class="input-icon">
                            <input type="text" id="form-field-icon-1" />
                            <i class="icon-leaf blue"></i>
                        </span>

                        <span class="input-icon input-icon-right">
                            <input type="text" id="form-field-icon-2" />
                            <i class="icon-leaf green"></i>
                        </span>
                    </div>
                </div>

                <div class="space-4"></div>

                <div class="form-group">
                    <label class="col-sm-3 control-label no-padding-right" for="form-field-6">Tooltip and help button</label>

                    <div class="col-sm-9">
                        <input data-rel="tooltip" type="text" id="form-field-6" placeholder="Tooltip on hover" title="Hello Tooltip!" data-placement="bottom" />
                        <span class="help-button" data-rel="popover" data-trigger="hover" data-placement="left" data-content="More details." title="Popover on hover">?</span>
                    </div>
                </div>

                <div class="space-4"></div>

                <div class="form-group">
                    <label class="col-sm-3 control-label no-padding-right" for="form-field-tags">Tag input</label>

                    <div class="col-sm-9">
                        <input type="text" name="tags" id="form-field-tags" value="Tag Input Control" placeholder="Enter tags ..." />
                    </div>
                </div>

                <div class="clearfix form-actions">
                    <div class="col-md-offset-3 col-md-9">
                        <button class="btn btn-info" type="button">
                            <i class="icon-ok bigger-110"></i>
                            Submit
                        </button>

                        &nbsp; &nbsp; &nbsp;
											<button class="btn" type="reset">
                                                <i class="icon-undo bigger-110"></i>
                                                Reset
                                            </button>
                    </div>
                </div>

                <div class="hr hr-24"></div>

                <div class="row">
                    <div class="col-xs-12 col-sm-4">
                        <div class="widget-box">
                            <div class="widget-header">
                                <h4>Text Area</h4>

                                <div class="widget-toolbar">
                                    <a href="#" data-action="collapse">
                                        <i class="icon-chevron-up"></i>
                                    </a>

                                    <a href="#" data-action="close">
                                        <i class="icon-remove"></i>
                                    </a>
                                </div>
                            </div>

                            <div class="widget-body">
                                <div class="widget-main">
                                    <div>
                                        <label for="form-field-8">Default</label>

                                        <textarea class="form-control" id="form-field-8" placeholder="Default Text"></textarea>
                                    </div>

                                    <hr />
                                    <div>
                                        <label for="form-field-9">With Character Limit</label>

                                        <textarea class="form-control limited" id="form-field-9" maxlength="50"></textarea>
                                    </div>

                                    <hr />
                                    <div>
                                        <label for="form-field-11">Autosize</label>

                                        <textarea id="form-field-11" class="autosize-transition form-control"></textarea>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- /span -->

                    <div class="col-xs-12 col-sm-4">
                        <div class="widget-box">
                            <div class="widget-header">
                                <h4>Masked Input</h4>

                                <span class="widget-toolbar">
                                    <a href="#" data-action="settings">
                                        <i class="icon-cog"></i>
                                    </a>

                                    <a href="#" data-action="reload">
                                        <i class="icon-refresh"></i>
                                    </a>

                                    <a href="#" data-action="collapse">
                                        <i class="icon-chevron-up"></i>
                                    </a>

                                    <a href="#" data-action="close">
                                        <i class="icon-remove"></i>
                                    </a>
                                </span>
                            </div>

                            <div class="widget-body">
                                <div class="widget-main">
                                    <div>
                                        <label for="form-field-mask-1">
                                            Date
																<small class="text-success">99/99/9999</small>
                                        </label>

                                        <div class="input-group">
                                            <input class="form-control input-mask-date" type="text" id="form-field-mask-1" />
                                            <span class="input-group-btn">
                                                <button class="btn btn-sm btn-default" type="button">
                                                    <i class="icon-calendar bigger-110"></i>
                                                    Go!
                                                </button>
                                            </span>
                                        </div>
                                    </div>

                                    <hr />
                                    <div>
                                        <label for="form-field-mask-2">
                                            Phone
																<small class="text-warning">(999) 999-9999</small>
                                        </label>

                                        <div class="input-group">
                                            <span class="input-group-addon">
                                                <i class="icon-phone"></i>
                                            </span>

                                            <input class="form-control input-mask-phone" type="text" id="form-field-mask-2" />
                                        </div>
                                    </div>

                                    <hr />
                                    <div>
                                        <label for="form-field-mask-3">
                                            Product Key
																<small class="text-error">a*-999-a999</small>
                                        </label>

                                        <div class="input-group">
                                            <input class="form-control input-mask-product" type="text" id="form-field-mask-3" />
                                            <span class="input-group-addon">
                                                <i class="icon-key"></i>
                                            </span>
                                        </div>
                                    </div>

                                    <hr />
                                    <div>
                                        <label for="form-field-mask-4">
                                            Eye Script
																<small class="text-info">~9.99 ~9.99 999</small>
                                        </label>

                                        <div>
                                            <input class="input-medium input-mask-eyescript" type="text" id="form-field-mask-4" />
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- /span -->

                    <div class="col-xs-12 col-sm-4">
                        <div class="widget-box">
                            <div class="widget-header">
                                <h4>Select Box</h4>

                                <span class="widget-toolbar">
                                    <a href="#" data-action="settings">
                                        <i class="icon-cog"></i>
                                    </a>

                                    <a href="#" data-action="reload">
                                        <i class="icon-refresh"></i>
                                    </a>

                                    <a href="#" data-action="collapse">
                                        <i class="icon-chevron-up"></i>
                                    </a>

                                    <a href="#" data-action="close">
                                        <i class="icon-remove"></i>
                                    </a>
                                </span>
                            </div>

                            <div class="widget-body">
                                <div class="widget-main">
                                    <div>
                                        <label for="form-field-select-1">Default</label>

                                        <select class="form-control" id="form-field-select-1">
                                            <option value="">&nbsp;</option>
                                            <option value="AL">Alabama</option>
                                            <option value="AK">Alaska</option>
                                            <option value="AZ">Arizona</option>
                                            <option value="AR">Arkansas</option>
                                            <option value="CA">California</option>
                                            <option value="CO">Colorado</option>
                                            <option value="CT">Connecticut</option>
                                            <option value="DE">Delaware</option>
                                            <option value="FL">Florida</option>
                                            <option value="GA">Georgia</option>
                                            <option value="HI">Hawaii</option>
                                            <option value="ID">Idaho</option>
                                            <option value="IL">Illinois</option>
                                            <option value="IN">Indiana</option>
                                            <option value="IA">Iowa</option>
                                            <option value="KS">Kansas</option>
                                            <option value="KY">Kentucky</option>
                                            <option value="LA">Louisiana</option>
                                            <option value="ME">Maine</option>
                                            <option value="MD">Maryland</option>
                                            <option value="MA">Massachusetts</option>
                                            <option value="MI">Michigan</option>
                                            <option value="MN">Minnesota</option>
                                            <option value="MS">Mississippi</option>
                                            <option value="MO">Missouri</option>
                                            <option value="MT">Montana</option>
                                            <option value="NE">Nebraska</option>
                                            <option value="NV">Nevada</option>
                                            <option value="NH">New Hampshire</option>
                                            <option value="NJ">New Jersey</option>
                                            <option value="NM">New Mexico</option>
                                            <option value="NY">New York</option>
                                            <option value="NC">North Carolina</option>
                                            <option value="ND">North Dakota</option>
                                            <option value="OH">Ohio</option>
                                            <option value="OK">Oklahoma</option>
                                            <option value="OR">Oregon</option>
                                            <option value="PA">Pennsylvania</option>
                                            <option value="RI">Rhode Island</option>
                                            <option value="SC">South Carolina</option>
                                            <option value="SD">South Dakota</option>
                                            <option value="TN">Tennessee</option>
                                            <option value="TX">Texas</option>
                                            <option value="UT">Utah</option>
                                            <option value="VT">Vermont</option>
                                            <option value="VA">Virginia</option>
                                            <option value="WA">Washington</option>
                                            <option value="WV">West Virginia</option>
                                            <option value="WI">Wisconsin</option>
                                            <option value="WY">Wyoming</option>
                                        </select>
                                    </div>

                                    <hr />
                                    <div>
                                        <label for="form-field-select-2">Multiple</label>

                                        <select class="form-control" id="form-field-select-2" multiple="multiple">
                                            <option value="AL">Alabama</option>
                                            <option value="AK">Alaska</option>
                                            <option value="AZ">Arizona</option>
                                            <option value="AR">Arkansas</option>
                                            <option value="CA">California</option>
                                            <option value="CO">Colorado</option>
                                            <option value="CT">Connecticut</option>
                                            <option value="DE">Delaware</option>
                                            <option value="FL">Florida</option>
                                            <option value="GA">Georgia</option>
                                            <option value="HI">Hawaii</option>
                                            <option value="ID">Idaho</option>
                                            <option value="IL">Illinois</option>
                                            <option value="IN">Indiana</option>
                                            <option value="IA">Iowa</option>
                                            <option value="KS">Kansas</option>
                                            <option value="KY">Kentucky</option>
                                            <option value="LA">Louisiana</option>
                                            <option value="ME">Maine</option>
                                            <option value="MD">Maryland</option>
                                            <option value="MA">Massachusetts</option>
                                            <option value="MI">Michigan</option>
                                            <option value="MN">Minnesota</option>
                                            <option value="MS">Mississippi</option>
                                            <option value="MO">Missouri</option>
                                            <option value="MT">Montana</option>
                                            <option value="NE">Nebraska</option>
                                            <option value="NV">Nevada</option>
                                            <option value="NH">New Hampshire</option>
                                            <option value="NJ">New Jersey</option>
                                            <option value="NM">New Mexico</option>
                                            <option value="NY">New York</option>
                                            <option value="NC">North Carolina</option>
                                            <option value="ND">North Dakota</option>
                                            <option value="OH">Ohio</option>
                                            <option value="OK">Oklahoma</option>
                                            <option value="OR">Oregon</option>
                                            <option value="PA">Pennsylvania</option>
                                            <option value="RI">Rhode Island</option>
                                            <option value="SC">South Carolina</option>
                                            <option value="SD">South Dakota</option>
                                            <option value="TN">Tennessee</option>
                                            <option value="TX">Texas</option>
                                            <option value="UT">Utah</option>
                                            <option value="VT">Vermont</option>
                                            <option value="VA">Virginia</option>
                                            <option value="WA">Washington</option>
                                            <option value="WV">West Virginia</option>
                                            <option value="WI">Wisconsin</option>
                                            <option value="WY">Wyoming</option>
                                        </select>
                                    </div>

                                    <hr />
                                    <div>
                                        <label for="form-field-select-3">Chosen</label>

                                        <br />
                                        <select class="width-80 chosen-select" id="form-field-select-3" data-placeholder="Choose a Country...">
                                            <option value="">&nbsp;</option>
                                            <option value="AL">Alabama</option>
                                            <option value="AK">Alaska</option>
                                            <option value="AZ">Arizona</option>
                                            <option value="AR">Arkansas</option>
                                            <option value="CA">California</option>
                                            <option value="CO">Colorado</option>
                                            <option value="CT">Connecticut</option>
                                            <option value="DE">Delaware</option>
                                            <option value="FL">Florida</option>
                                            <option value="GA">Georgia</option>
                                            <option value="HI">Hawaii</option>
                                            <option value="ID">Idaho</option>
                                            <option value="IL">Illinois</option>
                                            <option value="IN">Indiana</option>
                                            <option value="IA">Iowa</option>
                                            <option value="KS">Kansas</option>
                                            <option value="KY">Kentucky</option>
                                            <option value="LA">Louisiana</option>
                                            <option value="ME">Maine</option>
                                            <option value="MD">Maryland</option>
                                            <option value="MA">Massachusetts</option>
                                            <option value="MI">Michigan</option>
                                            <option value="MN">Minnesota</option>
                                            <option value="MS">Mississippi</option>
                                            <option value="MO">Missouri</option>
                                            <option value="MT">Montana</option>
                                            <option value="NE">Nebraska</option>
                                            <option value="NV">Nevada</option>
                                            <option value="NH">New Hampshire</option>
                                            <option value="NJ">New Jersey</option>
                                            <option value="NM">New Mexico</option>
                                            <option value="NY">New York</option>
                                            <option value="NC">North Carolina</option>
                                            <option value="ND">North Dakota</option>
                                            <option value="OH">Ohio</option>
                                            <option value="OK">Oklahoma</option>
                                            <option value="OR">Oregon</option>
                                            <option value="PA">Pennsylvania</option>
                                            <option value="RI">Rhode Island</option>
                                            <option value="SC">South Carolina</option>
                                            <option value="SD">South Dakota</option>
                                            <option value="TN">Tennessee</option>
                                            <option value="TX">Texas</option>
                                            <option value="UT">Utah</option>
                                            <option value="VT">Vermont</option>
                                            <option value="VA">Virginia</option>
                                            <option value="WA">Washington</option>
                                            <option value="WV">West Virginia</option>
                                            <option value="WI">Wisconsin</option>
                                            <option value="WY">Wyoming</option>
                                        </select>
                                    </div>

                                    <hr />
                                    <div>
                                        <div class="row">
                                            <div class="col-sm-6">
                                                <span class="bigger-110">Multiple</span>
                                            </div>
                                            <!-- /span -->

                                            <div class="col-sm-6">
                                                <span class="pull-right inline">
                                                    <span class="grey">style:</span>

                                                    <span class="btn-toolbar inline middle no-margin">
                                                        <span id="chosen-multiple-style" data-toggle="buttons" class="btn-group no-margin">
                                                            <label class="btn btn-xs btn-yellow active">
                                                                1
																					<input type="radio" value="1" />
                                                            </label>

                                                            <label class="btn btn-xs btn-yellow">
                                                                2
																					<input type="radio" value="2" />
                                                            </label>
                                                        </span>
                                                    </span>
                                                </span>
                                            </div>
                                            <!-- /span -->
                                        </div>

                                        <div class="space-2"></div>

                                        <select multiple="" class="width-80 chosen-select" id="form-field-select-4" data-placeholder="Choose a Country...">
                                            <option value="">&nbsp;</option>
                                            <option value="AL">Alabama</option>
                                            <option value="AK">Alaska</option>
                                            <option value="AZ">Arizona</option>
                                            <option value="AR">Arkansas</option>
                                            <option value="CA">California</option>
                                            <option value="CO">Colorado</option>
                                            <option value="CT">Connecticut</option>
                                            <option value="DE">Delaware</option>
                                            <option value="FL">Florida</option>
                                            <option value="GA">Georgia</option>
                                            <option value="HI">Hawaii</option>
                                            <option value="ID">Idaho</option>
                                            <option value="IL">Illinois</option>
                                            <option value="IN">Indiana</option>
                                            <option value="IA">Iowa</option>
                                            <option value="KS">Kansas</option>
                                            <option value="KY">Kentucky</option>
                                            <option value="LA">Louisiana</option>
                                            <option value="ME">Maine</option>
                                            <option value="MD">Maryland</option>
                                            <option value="MA">Massachusetts</option>
                                            <option value="MI">Michigan</option>
                                            <option value="MN">Minnesota</option>
                                            <option value="MS">Mississippi</option>
                                            <option value="MO">Missouri</option>
                                            <option value="MT">Montana</option>
                                            <option value="NE">Nebraska</option>
                                            <option value="NV">Nevada</option>
                                            <option value="NH">New Hampshire</option>
                                            <option value="NJ">New Jersey</option>
                                            <option value="NM">New Mexico</option>
                                            <option value="NY">New York</option>
                                            <option value="NC">North Carolina</option>
                                            <option value="ND">North Dakota</option>
                                            <option value="OH">Ohio</option>
                                            <option value="OK">Oklahoma</option>
                                            <option value="OR">Oregon</option>
                                            <option value="PA">Pennsylvania</option>
                                            <option value="RI">Rhode Island</option>
                                            <option value="SC">South Carolina</option>
                                            <option value="SD">South Dakota</option>
                                            <option value="TN">Tennessee</option>
                                            <option value="TX">Texas</option>
                                            <option value="UT">Utah</option>
                                            <option value="VT">Vermont</option>
                                            <option value="VA">Virginia</option>
                                            <option value="WA">Washington</option>
                                            <option value="WV">West Virginia</option>
                                            <option value="WI">Wisconsin</option>
                                            <option value="WY">Wyoming</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- /span -->
                </div>
                <!-- /row -->

                <div class="space-24"></div>

                <h3 class="header smaller lighter blue">Checkboxes & Radio
										<small>All Checkboxes, Radios and Switch Buttons Are Pure CSS</small>
                </h3>

                <div class="row">
                    <div class="col-xs-12 col-sm-5">
                        <div class="control-group">
                            <label class="control-label bolder blue">Checkbox</label>

                            <div class="checkbox">
                                <label>
                                    <input name="form-field-checkbox" type="checkbox" class="ace" />
                                    <span class="lbl">choice 1</span>
                                </label>
                            </div>

                            <div class="checkbox">
                                <label>
                                    <input name="form-field-checkbox" type="checkbox" class="ace" />
                                    <span class="lbl">choice 2</span>
                                </label>
                            </div>

                            <div class="checkbox">
                                <label>
                                    <input name="form-field-checkbox" class="ace ace-checkbox-2" type="checkbox" />
                                    <span class="lbl">choice 3</span>
                                </label>
                            </div>

                            <div class="checkbox">
                                <label class="block">
                                    <input name="form-field-checkbox" disabled="" type="checkbox" class="ace" />
                                    <span class="lbl">disabled</span>
                                </label>
                            </div>
                        </div>
                    </div>

                    <div class="col-xs-12 col-sm-6">
                        <div class="control-group">
                            <label class="control-label bolder blue">Radio</label>

                            <div class="radio">
                                <label>
                                    <input name="form-field-radio" type="radio" class="ace" />
                                    <span class="lbl">radio option 1</span>
                                </label>
                            </div>

                            <div class="radio">
                                <label>
                                    <input name="form-field-radio" type="radio" class="ace" />
                                    <span class="lbl">radio option 2</span>
                                </label>
                            </div>

                            <div class="radio">
                                <label>
                                    <input name="form-field-radio" type="radio" class="ace" />
                                    <span class="lbl">radio option 3</span>
                                </label>
                            </div>

                            <div class="radio">
                                <label>
                                    <input disabled="" name="form-field-radio" type="radio" class="ace" />
                                    <span class="lbl">disabled</span>
                                </label>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- /row -->

                <hr />
                <div class="form-group">
                    <label class="control-label col-xs-12 col-sm-3">On/Off Switches</label>

                    <div class="controls col-xs-12 col-sm-9">
                        <div class="row">
                            <div class="col-xs-3">
                                <label>
                                    <input name="switch-field-1" class="ace ace-switch" type="checkbox" />
                                    <span class="lbl"></span>
                                </label>
                            </div>

                            <div class="col-xs-3">
                                <label>
                                    <input name="switch-field-1" class="ace ace-switch ace-switch-2" type="checkbox" />
                                    <span class="lbl"></span>
                                </label>
                            </div>

                            <div class="col-xs-3">
                                <label>
                                    <input name="switch-field-1" class="ace ace-switch ace-switch-3" type="checkbox" />
                                    <span class="lbl"></span>
                                </label>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-xs-3">
                                <label>
                                    <input name="switch-field-1" class="ace ace-switch ace-switch-4" type="checkbox" />
                                    <span class="lbl"></span>
                                </label>
                            </div>

                            <div class="col-xs-3">
                                <label>
                                    <input name="switch-field-1" class="ace ace-switch ace-switch-5" type="checkbox" />
                                    <span class="lbl"></span>
                                </label>
                            </div>

                            <div class="col-xs-3">
                                <label>
                                    <input name="switch-field-1" class="ace ace-switch ace-switch-6" type="checkbox" />
                                    <span class="lbl"></span>
                                </label>
                            </div>

                            <div class="col-xs-3">
                                <label>
                                    <input name="switch-field-1" class="ace ace-switch ace-switch-7" type="checkbox" />
                                    <span class="lbl"></span>
                                </label>
                            </div>
                        </div>
                    </div>
                </div>

                <hr />
                <div class="row">
                    <div class="col-sm-4">
                        <div class="widget-box">
                            <div class="widget-header">
                                <h4>Custom File Input</h4>

                                <span class="widget-toolbar">
                                    <a href="#" data-action="collapse">
                                        <i class="icon-chevron-up"></i>
                                    </a>

                                    <a href="#" data-action="close">
                                        <i class="icon-remove"></i>
                                    </a>
                                </span>
                            </div>

                            <div class="widget-body">
                                <div class="widget-main">
                                    <input type="file" id="id-input-file-2" />
                                    <input multiple="" type="file" id="id-input-file-3" />
                                    <label>
                                        <input type="checkbox" name="file-format" id="id-file-format" class="ace" />
                                        <span class="lbl">Allow only images</span>
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-sm-4">
                        <div class="widget-box">
                            <div class="widget-header">
                                <h4>jQuery UI Sliders</h4>
                            </div>

                            <div class="widget-body">
                                <div class="widget-main">
                                    <div class="row">
                                        <div class="col-xs-3 col-md-2">
                                            <div id="slider-range"></div>
                                        </div>

                                        <div class="col-xs-9 col-md-10">
                                            <div id="eq">
                                                <span class="ui-slider-green">77</span>
                                                <span class="ui-slider-red">55</span>
                                                <span class="ui-slider-purple">33</span>
                                                <span class="ui-slider-orange">40</span>
                                                <span class="ui-slider-dark">88</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-sm-4">
                        <div class="widget-box">
                            <div class="widget-header">
                                <h4>Spinners</h4>
                            </div>

                            <div class="widget-body">
                                <div class="widget-main">
                                    <input type="text" class="input-mini" id="spinner1" />
                                    <div class="space-6"></div>

                                    <input type="text" class="input-mini" id="spinner2" />
                                    <div class="space-6"></div>

                                    <input type="text" class="input-mini" id="spinner3" />
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <hr />
                <div class="row">
                    <div class="col-sm-4">
                        <div class="widget-box">
                            <div class="widget-header">
                                <h4>Date Picker</h4>

                                <span class="widget-toolbar">
                                    <a href="#" data-action="settings">
                                        <i class="icon-cog"></i>
                                    </a>

                                    <a href="#" data-action="reload">
                                        <i class="icon-refresh"></i>
                                    </a>

                                    <a href="#" data-action="collapse">
                                        <i class="icon-chevron-up"></i>
                                    </a>

                                    <a href="#" data-action="close">
                                        <i class="icon-remove"></i>
                                    </a>
                                </span>
                            </div>

                            <div class="widget-body">
                                <div class="widget-main">
                                    <label for="id-date-picker-1">Date Picker</label>

                                    <div class="row">
                                        <div class="col-xs-8 col-sm-11">
                                            <div class="input-group">
                                                <input class="form-control date-picker" id="id-date-picker-1" type="text" data-date-format="dd-mm-yyyy" />
                                                <span class="input-group-addon">
                                                    <i class="icon-calendar bigger-110"></i>
                                                </span>
                                            </div>
                                        </div>
                                    </div>

                                    <hr />
                                    <label for="id-date-range-picker-1">Date Range Picker</label>

                                    <div class="row">
                                        <div class="col-xs-8 col-sm-11">
                                            <div class="input-group">
                                                <span class="input-group-addon">
                                                    <i class="icon-calendar bigger-110"></i>
                                                </span>

                                                <input class="form-control" type="text" name="date-range-picker" id="id-date-range-picker-1" />
                                            </div>
                                        </div>
                                    </div>

                                    <hr />
                                    <label for="timepicker1">Time Picker</label>

                                    <div class="input-group bootstrap-timepicker">
                                        <input id="timepicker1" type="text" class="form-control" />
                                        <span class="input-group-addon">
                                            <i class="icon-time bigger-110"></i>
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-sm-4">
                        <div class="widget-box">
                            <div class="widget-header">
                                <h4>
                                    <i class="icon-tint"></i>
                                    Color Picker
                                </h4>
                            </div>

                            <div class="widget-body">
                                <div class="widget-main">
                                    <div class="row-fluid">
                                        <label for="colorpicker1">Color Picker</label>
                                    </div>

                                    <div class="control-group">
                                        <div class="bootstrap-colorpicker">
                                            <input id="colorpicker1" type="text" class="input-small" />
                                        </div>
                                    </div>

                                    <hr />
                                    <label for="simple-colorpicker-1">Custom Color Picker</label>

                                    <select id="simple-colorpicker-1" class="hide">
                                        <option value="#ac725e">#ac725e</option>
                                        <option value="#d06b64">#d06b64</option>
                                        <option value="#f83a22">#f83a22</option>
                                        <option value="#fa573c">#fa573c</option>
                                        <option value="#ff7537">#ff7537</option>
                                        <option value="#ffad46" selected="">#ffad46</option>
                                        <option value="#42d692">#42d692</option>
                                        <option value="#16a765">#16a765</option>
                                        <option value="#7bd148">#7bd148</option>
                                        <option value="#b3dc6c">#b3dc6c</option>
                                        <option value="#fbe983">#fbe983</option>
                                        <option value="#fad165">#fad165</option>
                                        <option value="#92e1c0">#92e1c0</option>
                                        <option value="#9fe1e7">#9fe1e7</option>
                                        <option value="#9fc6e7">#9fc6e7</option>
                                        <option value="#4986e7">#4986e7</option>
                                        <option value="#9a9cff">#9a9cff</option>
                                        <option value="#b99aff">#b99aff</option>
                                        <option value="#c2c2c2">#c2c2c2</option>
                                        <option value="#cabdbf">#cabdbf</option>
                                        <option value="#cca6ac">#cca6ac</option>
                                        <option value="#f691b2">#f691b2</option>
                                        <option value="#cd74e6">#cd74e6</option>
                                        <option value="#a47ae2">#a47ae2</option>
                                        <option value="#555">#555</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-sm-4">
                        <div class="widget-box">
                            <div class="widget-header">
                                <h4>
                                    <i class="icon-dashboard"></i>
                                    Knob Input
                                </h4>
                            </div>

                            <div class="widget-body">
                                <div class="widget-main">
                                    <div class="control-group">
                                        <div class="row">
                                            <div class="col-xs-6 center">
                                                <div class="knob-container inline">
                                                    <input type="text" class="input-small knob" value="15" data-min="0" data-max="100" data-step="10" data-width="80" data-height="80" data-thickness=".2" />
                                                </div>
                                            </div>

                                            <div class="col-xs-6  center">
                                                <div class="knob-container inline">
                                                    <input type="text" class="input-small knob" value="41" data-min="0" data-max="100" data-width="80" data-height="80" data-thickness=".2" data-fgcolor="#87B87F" data-displayprevious="true" data-anglearc="250" data-angleoffset="-125" />
                                                </div>
                                            </div>
                                        </div>

                                        <div class="row">
                                            <div class="col-xs-12 center">
                                                <div class="knob-container inline">
                                                    <input type="text" class="input-small knob" data-min="0" data-max="10" data-width="150" data-height="150" data-thickness=".2" data-fgcolor="#B8877F" data-angleoffset="90" data-cursor="true" />
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </form>

            <div class="hr hr-18 dotted hr-double"></div>

            <h4 class="pink">
                <i class="icon-hand-right green"></i>
                <a href="#modal-form" role="button" class="blue" data-toggle="modal">Form Inside a Modal Box </a>
            </h4>

            <div class="hr hr-18 dotted hr-double"></div>
            <h4 class="header green">Form Layouts</h4>

            <div class="row">
                <div class="col-sm-5">
                    <div class="widget-box">
                        <div class="widget-header">
                            <h4>Default</h4>
                        </div>

                        <div class="widget-body">
                            <div class="widget-main no-padding">
                                <form>
                                    <!-- <legend>Form</legend> -->

                                    <fieldset>
                                        <label>Label name</label>

                                        <input type="text" placeholder="Type something&hellip;" />
                                        <span class="help-block">Example block-level help text here.</span>

                                        <label class="pull-right">
                                            <input type="checkbox" class="ace" />
                                            <span class="lbl">check me out</span>
                                        </label>
                                    </fieldset>

                                    <div class="form-actions center">
                                        <button type="button" class="btn btn-sm btn-success">
                                            Submit
																<i class="icon-arrow-right icon-on-right bigger-110"></i>
                                        </button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-sm-7">
                    <div class="widget-box">
                        <div class="widget-header">
                            <h4>Inline Forms</h4>
                        </div>

                        <div class="widget-body">
                            <div class="widget-main">
                                <form class="form-inline">
                                    <input type="text" class="input-small" placeholder="Username" />
                                    <input type="password" class="input-small" placeholder="Password" />
                                    <label class="inline">
                                        <input type="checkbox" class="ace" />
                                        <span class="lbl">remember me</span>
                                    </label>

                                    <button type="button" class="btn btn-info btn-sm">
                                        <i class="icon-key bigger-110"></i>
                                        Login
                                    </button>
                                </form>
                            </div>
                        </div>
                    </div>

                    <div class="space-6"></div>

                    <div class="widget-box">
                        <div class="widget-header widget-header-small">
                            <h5 class="lighter">Search Form</h5>
                        </div>

                        <div class="widget-body">
                            <div class="widget-main">
                                <form class="form-search">
                                    <div class="row">
                                        <div class="col-xs-12 col-sm-8">
                                            <div class="input-group">
                                                <input type="text" class="form-control search-query" placeholder="Type your query" />
                                                <span class="input-group-btn">
                                                    <button type="button" class="btn btn-purple btn-sm">
                                                        Search
																			<i class="icon-search icon-on-right bigger-110"></i>
                                                    </button>
                                                </span>
                                            </div>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div id="modal-form" class="modal" tabindex="-1">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal">&times;</button>
                            <h4 class="blue bigger">Please fill the following form fields</h4>
                        </div>

                        <div class="modal-body overflow-visible">
                            <div class="row">
                                <div class="col-xs-12 col-sm-5">
                                    <div class="space"></div>

                                    <input type="file" />
                                </div>

                                <div class="col-xs-12 col-sm-7">
                                    <div class="form-group">
                                        <label for="form-field-select-3">Location</label>

                                        <div>
                                            <select class="chosen-select" data-placeholder="Choose a Country...">
                                                <option value="">&nbsp;</option>
                                                <option value="AL">Alabama</option>
                                                <option value="AK">Alaska</option>
                                                <option value="AZ">Arizona</option>
                                                <option value="AR">Arkansas</option>
                                                <option value="CA">California</option>
                                                <option value="CO">Colorado</option>
                                                <option value="CT">Connecticut</option>
                                                <option value="DE">Delaware</option>
                                                <option value="FL">Florida</option>
                                                <option value="GA">Georgia</option>
                                                <option value="HI">Hawaii</option>
                                                <option value="ID">Idaho</option>
                                                <option value="IL">Illinois</option>
                                                <option value="IN">Indiana</option>
                                                <option value="IA">Iowa</option>
                                                <option value="KS">Kansas</option>
                                                <option value="KY">Kentucky</option>
                                                <option value="LA">Louisiana</option>
                                                <option value="ME">Maine</option>
                                                <option value="MD">Maryland</option>
                                                <option value="MA">Massachusetts</option>
                                                <option value="MI">Michigan</option>
                                                <option value="MN">Minnesota</option>
                                                <option value="MS">Mississippi</option>
                                                <option value="MO">Missouri</option>
                                                <option value="MT">Montana</option>
                                                <option value="NE">Nebraska</option>
                                                <option value="NV">Nevada</option>
                                                <option value="NH">New Hampshire</option>
                                                <option value="NJ">New Jersey</option>
                                                <option value="NM">New Mexico</option>
                                                <option value="NY">New York</option>
                                                <option value="NC">North Carolina</option>
                                                <option value="ND">North Dakota</option>
                                                <option value="OH">Ohio</option>
                                                <option value="OK">Oklahoma</option>
                                                <option value="OR">Oregon</option>
                                                <option value="PA">Pennsylvania</option>
                                                <option value="RI">Rhode Island</option>
                                                <option value="SC">South Carolina</option>
                                                <option value="SD">South Dakota</option>
                                                <option value="TN">Tennessee</option>
                                                <option value="TX">Texas</option>
                                                <option value="UT">Utah</option>
                                                <option value="VT">Vermont</option>
                                                <option value="VA">Virginia</option>
                                                <option value="WA">Washington</option>
                                                <option value="WV">West Virginia</option>
                                                <option value="WI">Wisconsin</option>
                                                <option value="WY">Wyoming</option>
                                            </select>
                                        </div>
                                    </div>

                                    <div class="space-4"></div>

                                    <div class="form-group">
                                        <label for="form-field-username">Username</label>

                                        <div>
                                            <input class="input-large" type="text" id="form-field-username" placeholder="Username" value="alexdoe" />
                                        </div>
                                    </div>

                                    <div class="space-4"></div>

                                    <div class="form-group">
                                        <label for="form-field-first">Name</label>

                                        <div>
                                            <input class="input-medium" type="text" id="form-field-first" placeholder="First Name" value="Alex" />
                                            <input class="input-medium" type="text" id="form-field-last" placeholder="Last Name" value="Doe" />
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="modal-footer">
                            <button class="btn btn-sm" data-dismiss="modal">
                                <i class="icon-remove"></i>
                                Cancel
                            </button>

                            <button class="btn btn-sm btn-primary">
                                <i class="icon-ok"></i>
                                Save
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            <!-- PAGE CONTENT ENDS -->
        </div>
        <!-- /.col -->
    </div>
    <!-- /.row -->
</div>
<!-- /.page-content -->

@section cssPagePlugin {
    <link rel="stylesheet" href="/assets/css/jquery-ui-1.10.3.custom.min.css" />
    <link rel="stylesheet" href="/assets/css/chosen.css" />
    <link rel="stylesheet" href="/assets/css/datepicker.css" />
    <link rel="stylesheet" href="/assets/css/bootstrap-timepicker.css" />
    <link rel="stylesheet" href="/assets/css/daterangepicker.css" />
    <link rel="stylesheet" href="/assets/css/colorpicker.css" />
}
@section styles {
}
@section jsPagePlugin {
    <!--[if lte IE 8]>
		<script src="/assets/js/excanvas.min.js"></script>
	<![endif]-->

    <script src="/assets/js/jquery-ui-1.10.3.custom.min.js"></script>
    <script src="/assets/js/jquery.ui.touch-punch.min.js"></script>
    <script src="/assets/js/chosen.jquery.min.js"></script>
    <script src="/assets/js/fuelux/fuelux.spinner.min.js"></script>
    <script src="/assets/js/date-time/bootstrap-datepicker.min.js"></script>
    <script src="/assets/js/date-time/bootstrap-timepicker.min.js"></script>
    <script src="/assets/js/date-time/moment.min.js"></script>
    <script src="/assets/js/date-time/daterangepicker.min.js"></script>
    <script src="/assets/js/bootstrap-colorpicker.min.js"></script>
    <script src="/assets/js/jquery.knob.min.js"></script>
    <script src="/assets/js/jquery.autosize.min.js"></script>
    <script src="/assets/js/jquery.inputlimiter.1.3.1.min.js"></script>
    <script src="/assets/js/jquery.maskedinput.min.js"></script>
    <script src="/assets/js/bootstrap-tag.min.js"></script>
}
@section scripts {
    <script type="text/javascript">
        jQuery( function ( $ ) {
            $( '#id-disable-check' ).on( 'click', function () {
                var inp = $( '#form-input-readonly' ).get( 0 );
                if ( inp.hasAttribute( 'disabled' ) ) {
                    inp.setAttribute( 'readonly', 'true' );
                    inp.removeAttribute( 'disabled' );
                    inp.value = "This text field is readonly!";
                }
                else {
                    inp.setAttribute( 'disabled', 'disabled' );
                    inp.removeAttribute( 'readonly' );
                    inp.value = "This text field is disabled!";
                }
            } );


            $( ".chosen-select" ).chosen();
            $( '#chosen-multiple-style' ).on( 'click', function ( e ) {
                var target = $( e.target ).find( 'input[type=radio]' );
                var which = parseInt( target.val() );
                if ( which == 2 ) $( '#form-field-select-4' ).addClass( 'tag-input-style' );
                else $( '#form-field-select-4' ).removeClass( 'tag-input-style' );
            } );


            $( '[data-rel=tooltip]' ).tooltip( { container: 'body' } );
            $( '[data-rel=popover]' ).popover( { container: 'body' } );

            $( 'textarea[class*=autosize]' ).autosize( { append: "\n" } );
            $( 'textarea.limited' ).inputlimiter( {
                remText: '%n character%s remaining...',
                limitText: 'max allowed : %n.'
            } );

            $.mask.definitions['~'] = '[+-]';
            $( '.input-mask-date' ).mask( '99/99/9999' );
            $( '.input-mask-phone' ).mask( '(999) 999-9999' );
            $( '.input-mask-eyescript' ).mask( '~9.99 ~9.99 999' );
            $( ".input-mask-product" ).mask( "a*-999-a999", { placeholder: " ", completed: function () { alert( "You typed the following: " + this.val() ); } } );



            $( "#input-size-slider" ).css( 'width', '200px' ).slider( {
                value: 1,
                range: "min",
                min: 1,
                max: 8,
                step: 1,
                slide: function ( event, ui ) {
                    var sizing = ['', 'input-sm', 'input-lg', 'input-mini', 'input-small', 'input-medium', 'input-large', 'input-xlarge', 'input-xxlarge'];
                    var val = parseInt( ui.value );
                    $( '#form-field-4' ).attr( 'class', sizing[val] ).val( '.' + sizing[val] );
                }
            } );

            $( "#input-span-slider" ).slider( {
                value: 1,
                range: "min",
                min: 1,
                max: 12,
                step: 1,
                slide: function ( event, ui ) {
                    var val = parseInt( ui.value );
                    $( '#form-field-5' ).attr( 'class', 'col-xs-' + val ).val( '.col-xs-' + val );
                }
            } );


            $( "#slider-range" ).css( 'height', '200px' ).slider( {
                orientation: "vertical",
                range: true,
                min: 0,
                max: 100,
                values: [17, 67],
                slide: function ( event, ui ) {
                    var val = ui.values[$( ui.handle ).index() - 1] + "";

                    if ( !ui.handle.firstChild ) {
                        $( ui.handle ).append( "<div class='tooltip right in' style='display:none;left:16px;top:-6px;'><div class='tooltip-arrow'></div><div class='tooltip-inner'></div></div>" );
                    }
                    $( ui.handle.firstChild ).show().children().eq( 1 ).text( val );
                }
            } ).find( 'a' ).on( 'blur', function () {
                $( this.firstChild ).hide();
            } );

            $( "#slider-range-max" ).slider( {
                range: "max",
                min: 1,
                max: 10,
                value: 2
            } );

            $( "#eq > span" ).css( { width: '90%', 'float': 'left', margin: '15px' } ).each( function () {
                // read initial values from markup and remove that
                var value = parseInt( $( this ).text(), 10 );
                $( this ).empty().slider( {
                    value: value,
                    range: "min",
                    animate: true

                } );
            } );


            $( '#id-input-file-1 , #id-input-file-2' ).ace_file_input( {
                no_file: 'No File ...',
                btn_choose: 'Choose',
                btn_change: 'Change',
                droppable: false,
                onchange: null,
                thumbnail: false //| true | large
                //whitelist:'gif|png|jpg|jpeg'
                //blacklist:'exe|php'
                //onchange:''
                //
            } );

            $( '#id-input-file-3' ).ace_file_input( {
                style: 'well',
                btn_choose: 'Drop files here or click to choose',
                btn_change: null,
                no_icon: 'icon-cloud-upload',
                droppable: true,
                thumbnail: 'small'//large | fit
                //,icon_remove:null//set null, to hide remove/reset button
                /**,before_change:function(files, dropped) {
                    //Check an example below
                    //or examples/file-upload.html
                    return true;
                }*/
                /**,before_remove : function() {
                    return true;
                }*/
                ,
                preview_error: function ( filename, error_code ) {
                    //name of the file that failed
                    //error_code values
                    //1 = 'FILE_LOAD_FAILED',
                    //2 = 'IMAGE_LOAD_FAILED',
                    //3 = 'THUMBNAIL_FAILED'
                    //alert(error_code);
                }

            } ).on( 'change', function () {
                //console.log($(this).data('ace_input_files'));
                //console.log($(this).data('ace_input_method'));
            } );


            //dynamically change allowed formats by changing before_change callback function
            $( '#id-file-format' ).removeAttr( 'checked' ).on( 'change', function () {
                var before_change
                var btn_choose
                var no_icon
                if ( this.checked ) {
                    btn_choose = "Drop images here or click to choose";
                    no_icon = "icon-picture";
                    before_change = function ( files, dropped ) {
                        var allowed_files = [];
                        for ( var i = 0 ; i < files.length; i++ ) {
                            var file = files[i];
                            if ( typeof file === "string" ) {
                                //IE8 and browsers that don't support File Object
                                if ( !( /\.(jpe?g|png|gif|bmp)$/i ).test( file ) ) return false;
                            }
                            else {
                                var type = $.trim( file.type );
                                if ( ( type.length > 0 && !( /^image\/(jpe?g|png|gif|bmp)$/i ).test( type ) )
                                        || ( type.length == 0 && !( /\.(jpe?g|png|gif|bmp)$/i ).test( file.name ) )//for android's default browser which gives an empty string for file.type
                                    ) continue;//not an image so don't keep this file
                            }

                            allowed_files.push( file );
                        }
                        if ( allowed_files.length == 0 ) return false;

                        return allowed_files;
                    }
                }
                else {
                    btn_choose = "Drop files here or click to choose";
                    no_icon = "icon-cloud-upload";
                    before_change = function ( files, dropped ) {
                        return files;
                    }
                }
                var file_input = $( '#id-input-file-3' );
                file_input.ace_file_input( 'update_settings', { 'before_change': before_change, 'btn_choose': btn_choose, 'no_icon': no_icon } )
                file_input.ace_file_input( 'reset_input' );
            } );




            $( '#spinner1' ).ace_spinner( { value: 0, min: 0, max: 200, step: 10, btn_up_class: 'btn-info', btn_down_class: 'btn-info' } )
            .on( 'change', function () {
                //alert(this.value)
            } );
            $( '#spinner2' ).ace_spinner( { value: 0, min: 0, max: 10000, step: 100, touch_spinner: true, icon_up: 'icon-caret-up', icon_down: 'icon-caret-down' } );
            $( '#spinner3' ).ace_spinner( { value: 0, min: -100, max: 100, step: 10, on_sides: true, icon_up: 'icon-plus smaller-75', icon_down: 'icon-minus smaller-75', btn_up_class: 'btn-success', btn_down_class: 'btn-danger' } );



            $( '.date-picker' ).datepicker( { autoclose: true } ).next().on( ace.click_event, function () {
                $( this ).prev().focus();
            } );
            $( 'input[name=date-range-picker]' ).daterangepicker().prev().on( ace.click_event, function () {
                $( this ).next().focus();
            } );

            $( '#timepicker1' ).timepicker( {
                minuteStep: 1,
                showSeconds: true,
                showMeridian: false
            } ).next().on( ace.click_event, function () {
                $( this ).prev().focus();
            } );

            $( '#colorpicker1' ).colorpicker();
            $( '#simple-colorpicker-1' ).ace_colorpicker();


            $( ".knob" ).knob();


            //we could just set the data-provide="tag" of the element inside HTML, but IE8 fails!
            var tag_input = $( '#form-field-tags' );
            if ( !( /msie\s*(8|7|6)/.test( navigator.userAgent.toLowerCase() ) ) ) {
                tag_input.tag(
                  {
                      placeholder: tag_input.attr( 'placeholder' ),
                      //enable typeahead by specifying the source array
                      source: ace.variable_US_STATES,//defined in ace.js >> ace.enable_search_ahead
                  }
                );
            }
            else {
                //display a textarea for old IE, because it doesn't support this plugin or another one I tried!
                tag_input.after( '<textarea id="' + tag_input.attr( 'id' ) + '" name="' + tag_input.attr( 'name' ) + '" rows="3">' + tag_input.val() + '</textarea>' ).remove();
                //$('#form-field-tags').autosize({append: "\n"});
            }




            /////////
            $( '#modal-form input[type=file]' ).ace_file_input( {
                style: 'well',
                btn_choose: 'Drop files here or click to choose',
                btn_change: null,
                no_icon: 'icon-cloud-upload',
                droppable: true,
                thumbnail: 'large'
            } )

            //chosen plugin inside a modal will have a zero width because the select element is originally hidden
            //and its width cannot be determined.
            //so we set the width after modal is show
            $( '#modal-form' ).on( 'shown.bs.modal', function () {
                $( this ).find( '.chosen-container' ).each( function () {
                    $( this ).find( 'a:first-child' ).css( 'width', '210px' );
                    $( this ).find( '.chosen-drop' ).css( 'width', '210px' );
                    $( this ).find( '.chosen-search input' ).css( 'width', '200px' );
                } );
            } )
            /**
            //or you can activate the chosen plugin after modal is shown
            //this way select element becomes visible with dimensions and chosen works as expected
            $('#modal-form').on('shown', function () {
                $(this).find('.modal-chosen').chosen();
            })
            */

        } );
    </script>
}